<template>
  <view class="content">
    <scroll-view scroll-y class="left-aside">
      <view v-for="item in flist" :key="item.shopsId" class="f-item b-b"  :class="{active: item.shopsId === currentId}" @click="tabtap(item)">
        {{item.shopName}}
      </view>
    </scroll-view>
    <scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
      <view v-for="item in slist" :key="item.orderId" class="s-list" :id="'main-'+item.id">
        <text class="s-item" >商品{{item.productId}},销售{{item.total}}件，售价{{item.payment}}</text>
<!--        <view class="t-list">
          <view @click="navToList(item.id, titem.id)" v-if="titem.parentId === item.id" class="t-item" v-for="titem in tlist" :key="titem.id">
            <image :src="titem.images"></image>
            <text>{{titem.name}}</text>
          </view>
        </view>-->
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {getUserProfile} from '@/api/product/product.js';
import { submitMarketers , getShopProfile,getOrderDetail} from "@/api/system/marketers"
export default {
  data() {
    return {
      sizeCalcState: false,
      tabScrollTop: 0,
      currentId: 1,
      flist: [],
      slist: [],
      tlist: [],
      total:'',
      shop: {
        shopsId: "",
        shopName: "",
        shopUser: "",
        shopLogo: "",
        shopUrl: "",
        shopAddress: "",
        shopType: "",
        shopStatus: "",
        isSelf: "",
        shopPhone: "",
        shopEmail: "",
        shopApprovedAt: "",
        applyId: "",
        orderId: "",
        openingHours: "",
        shopLicense: "",
        shopSize: "",
        mainProducts: "",
        otherProducts: "",
        shopApprovedBy: "",
        shopDescription: "",
        shopFacade: "",
        shopIntroduction: "",
        createTime: "",
        updateTime: "",
        bankAccountName: "",
        bankAccount: "",
        subBranch: "",
        lineNumber: "",
        legalPersonName: "",
        legalPersonDocument: "",
        legalPersonImag: "",
        corporateName: "",
        corporatePhone: "",
        corporateUrl: "",
        corporateAddress: "",
        corporateCount: "",
        registeredCapital: "",
        contactName: "",
        contactPhone: "",
        contactEmail: "",
        licenseNumber: "",
        businessScope: "",
        shopELicense: "",
        rejectReason: ""
      }
    }
  },
  onLoad(){
    this.loadProduct();
  },
  methods: {
    loadProduct() {
      this.shop.shopUser = this.$store.state.user.name;
      getShopProfile(this.shop).then(response => {
        let list = response
        this.flist = response
        //console.log(item.shopsId+"=-")
        /*list.forEach(item => {
          if(!item.parentId){
            this.flist.push(item);  //pid为父级id, 没有pid或者pid=0是一级分类
            console.log(JSON.parse(this.flist)+"=")
          }
          getOrderDetail(item.shopsId).then(response => {
            this.slist = response;
          })
        })*/
      })

    },
    //一级分类点击
    tabtap(item){
      if(!this.sizeCalcState){
        this.calcSize();
      }
      console.log(item.shopsId+";;")
      this.currentId = item.shopsId;
      getOrderDetail(item.shopsId).then(response => {
        if (response){
          response.forEach(item => {
            console.log(item+"//")
              this.slist = response;
          })
        }else {
          this.slist = '';
        }

      })
      //let index = this.slist.findIndex(sitem=>sitem.parentId === item.id);
      //this.tabScrollTop = this.slist[index].top;
    },
    //右侧栏滚动
    asideScroll(e){
      if(!this.sizeCalcState){
        this.calcSize();
      }
      let scrollTop = e.detail.scrollTop;
      let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
      if(tabs.length > 0){
        this.currentId = tabs[0].parentId;
      }
    },
    //计算右侧栏每个tab的高度等信息
    calcSize(){
      let h = 0;
      this.slist.forEach(item=>{
        let view = uni.createSelectorQuery().select("#main-" + item.id);
        view.fields({
          size: true
        }, data => {
          item.top = h;
          h += data.height;
          item.bottom = h;
        }).exec();
      })
      this.sizeCalcState = true;
    },
    navToList(sid, tid){
      uni.navigateTo({
        url: `/pages/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`
      })
    }
  }
}
</script>

<style lang='scss'>
page,
.content {
  height: 100%;
  background-color: #f8f8f8;
}

.content {
  display: flex;
}
.left-aside {
  flex-shrink: 0;
  width: 200upx;
  height: 100%;
  background-color: #fff;
}
.f-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100upx;
  font-size: 28upx;
  color: $font-color-base;
  position: relative;
  &.active{
    color: $base-color;
    background: #f8f8f8;
    &:before{
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 36upx;
      width: 8upx;
      background-color: $base-color;
      border-radius: 0 4px 4px 0;
      opacity: .8;
    }
  }
}

.right-aside{
  flex: 1;
  overflow: hidden;
  padding-left: 20upx;
}
.s-item{
  display: flex;
  align-items: center;
  height: 70upx;
  padding-top: 8upx;
  font-size: 28upx;
  color: $font-color-dark;
}
.t-list{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: #fff;
  padding-top: 12upx;
  &:after{
    content: '';
    flex: 99;
    height: 0;
  }
}
.t-item{
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 176upx;
  font-size: 26upx;
  color: #666;
  padding-bottom: 20upx;

  image{
    width: 140upx;
    height: 140upx;
  }
}
</style>
